<template>
    <div class="person">
      <h2>当前求和为:{{ sum }}</h2>
      <button @click="add">点我+1</button>
      <br>
      <button @click="oneMoreDog">再来一只狗</button>
      <img v-for="(item,index) in dogList" :src="item" :key="index"/>
    </div>
</template>

<script lang="ts" setup name = "Person">
   import useDog from '@/hooks/useDog';
   import useSum from '@/hooks/useSum';
  
   const { sum, add } = useSum()
   const { dogList, oneMoreDog } = useDog()
   
  
</script>

<style>
.person {
  background: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
img{
  object-fit: cover;
  width: 300px;
  height: 300px;
  margin-right: 10px;
}
button{
  display: block;
}

</style>